<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>教师端后台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../../static/layui/css/layui.css" rel="stylesheet">
  <link rel="stylesheet" href="../../static/css/all.min.css">

  <style>
    :root {
      --primary-color: #409EFF;
      --sidebar-bg: #1f2d3d;
      --sidebar-hover: #263445;
      --header-bg: #ffffff;
      --content-bg: #f5f7fa;
      --text-color: #333;
      --text-light: #666;
      --border-color: #e6e6e6;
      --shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      color: var(--text-color);
    }

    .layui-layout-admin {
      background-color: var(--content-bg);
    }

    .layui-header {
      height: 60px;
      background-color: var(--header-bg) !important;
      box-shadow: var(--shadow);
      z-index: 1001;
      border-bottom: 1px solid var(--border-color);
    }

    .layui-logo {
      width: 220px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: var(--primary-color) !important;
      background-color: var(--sidebar-bg) !important;
      transition: all 0.3s;
    }

    /* 1. 左侧导航栏容器：清除边框，隐藏滚动条 */
    .layui-side {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: 220px;
      background-color: #1f2d3d;
      box-shadow: none;
      overflow: hidden;
      border-right: none;
    }

    /* 2. 导航栏滚动容器：充满父容器，清除默认样式 */
    .layui-side-scroll {
      height: 100%;
      padding: 0;
      overflow-y: auto;
    }

    /* 3. 隐藏滚动条（关键！） */
    .layui-side-scroll::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    /* 4. 内容区：清除左侧边框，与导航栏对齐 */
    .layui-body {
      position: relative;
      left: 220px;
      top: 0;
      right: 0; bottom: 0;
      padding: 15px;
      background-color: #fff;
      border-left: none;
    }

    .layui-nav .layui-nav-item {
      line-height: 56px;
    }

    /* 5. 导航菜单项：紧凑排版，消除违和感 */
    .layui-nav-tree {
      background-color: var(--sidebar-bg) !important;
      padding: 0;
      border: none;
    }

    .layui-nav-tree .layui-nav-item {
      margin: 0;
    }

    .layui-nav-tree .layui-nav-item a {
      color: #bfcbd9 !important;
      font-size: 14px;
      height: 50px;
      line-height: 50px;
      padding: 0 20px !important;
      transition: all 0.3s;
    }

    .layui-nav-tree .layui-nav-item a:hover {
      background-color: var(--sidebar-hover) !important;
      color: #fff !important;
    }

    .layui-nav-tree .layui-nav-item a i {
      margin-right: 10px;
      font-size: 16px;
    }

    .layui-nav-tree .layui-nav-item.layui-this a {
      background-color: var(--primary-color) !important;
      color: #fff !important;
    }

    .layui-nav-tree .layui-nav-child {
      background-color: #1c2b3a !important;
      padding: 0 !important;
    }

    .layui-nav-tree .layui-nav-child a {
      padding-left: 50px !important;
    }

    .layui-nav-tree .layui-nav-child a:hover {
      background-color: #001528 !important;
    }

    /* 用户信息样式 */
    .user-info {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 60px;
      cursor: pointer;
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .user-name {
      font-size: 14px;
      color: var(--text-color);
    }

    /* iframe样式 */
    iframe {
      width: 100%;
      height: 100%;
      border: none;
      background-color: #fff;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .layui-side {
        left: -220px;
      }
      .layui-body {
        left: 0;
      }
      .layui-logo {
        width: 60px;
        overflow: hidden;
      }
    }

    /* 动画效果 */
    .layui-nav-item {
      transition: all 0.3s;
    }

    /* 面包屑导航 */
    .breadcrumb {
      padding: 15px;
      background-color: #fff;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 15px;
      position: static;
      width: auto;
      height: auto;
      line-height: inherit;
      text-align: left;
      color: inherit;
      font-size: inherit;
    }

    .breadcrumb-item {
      display: inline-block;
      color: var(--text-light);
      font-size: 14px;
    }

    .breadcrumb-item:not(:last-child):after {
      content: "/";
      margin: 0 8px;
      color: #c0c4cc;
    }

    .breadcrumb-item.active {
      color: var(--primary-color);
    }
  </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">
      <!-- 后续加左侧图标，保留结构 -->
      <h2>师生助手</h2>
    </div>
    <div class="breadcrumb">
      <span class="breadcrumb-item"><i class="fas fa-home"></i> 首页</span>
      <span class="breadcrumb-item active">学生管理</span>
    </div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <div class="user-info">
          <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" class="user-avatar"
               alt="头像">
          <span class="user-name">管理员</span>
        </div>
        <dl class="layui-nav-child">
          <dd><a href="adminInfo"><i class="fas fa-user-circle"></i> 个人中心</a></dd>
          <dd class="returnlogin"><a href="javascript:;"><i class="fas fa-sign-out-alt returnlogin"></i> 退出登录</a>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed">
          <a href="teacherChat" target="myIframe"> <!-- 后续根据实际子页面调整 -->
            <i class="fas fa-comments"></i>
            <span>班级聊天</span>
          </a>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
          <a href="studentlist" target="myIframe">
            <i class="fas fa-user-graduate"></i>
            <span>学生管理</span>
          </a>
        </li>
        <li class="layui-nav-item">
          <a href="LessonPlanManagement" target="myIframe">
            <i class="fas fa-book-open"></i>
            <span>教案管理</span>
          </a>
        </li>
        <li class="layui-nav-item">
          <a href="ExamManagement" target="myIframe">
            <i class="fas fa-pencil-alt"></i>
            <span>考试管理</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <iframe name="myIframe" src="teacherChat" frameborder="0" onload="resizeIframe(this)"></iframe>
  </div>
</div>

<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/js/TeacherIndex.js"></script>
<script src="../../static/layui/js/layui.js"></script>
<script>
  layui.use(['element', 'layer', 'util'], function () {
    var element = layui.element;
    var layer = layui.layer;
    var util = layui.util;
    var $ = layui.$;

    util.event('lay-header-event', {
      menuRight: function () {
        layer.open({
          type: 1,
          title: '快捷菜单',
          content: '<div style="padding: 15px;">' +
                  '<div class="layui-btn-container">' +
                  '<button class="layui-btn layui-btn-sm"><i class="fas fa-bell"></i> 消息中心</button>' +
                  '<button class="layui-btn layui-btn-sm layui-btn-normal"><i class="fas fa-tasks"></i> 待办事项</button>' +
                  '<button class="layui-btn layui-btn-sm layui-btn-warm"><i class="fas fa-question-circle"></i> 帮助中心</button>' +
                  '</div></div>',
          area: ['280px', 'auto'],
          offset: 'rt',
          anim: 'slideLeft',
          shadeClose: true,
          scrollbar: false
        });
      }
    });

    $('.layui-nav-tree .layui-nav-item a').on('click', function () {
      var text = $(this).find('span').text();
      $('.breadcrumb-item.active').text(text);
    });

    $('iframe').on('load', function () {
      $(this).height($(window).height() - 90);
    });

    $(window).resize(function () {
      $('iframe').height($(window).height() - 90);
    });
  });

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>
</body>
</html>